<template>
    <panel title="In货推荐" class="panel">
        <section class="content">
            <div class="item" v-for="item in items" :key="item._sid">
                <img :src="item.catory" alt="">
                <section class="list">
                    <div class="product" v-for="list in item.list" :key="list._id">
                        <img :src="list.img" alt="">
                        <p class="title">{{list.title}}</p>
                        <p class="price"><em>{{list.price}}</em>起</p>
                        <article>
                            <div class="wrapper">
                                <div class="inner" :style="{width: list.progress+'%'}"></div>
                            </div>
                            <p>{{list.progress}}%</p>
                        </article>
                        <label v-show="list.jx">{{list.jx}}</label>
                    </div>
                </section>
            </div>
        </section>
    </panel>
</template>

<script>
import Panel from "@/components/panel"
export default {
    name: 'In',
    components: {
        Panel
    },
    data() {
        return {
            items: [
                {  
                     _sid:'01',
                    catory: 'https://img12.360buyimg.com/jrpmobile/jfs/t20125/139/377044579/41214/51a08cb6/5b0b947bN916e62ee.jpg?width=1500&height=442',
                    list: [
                        {   
                            _id:'A001',
                            img: 'https://img12.360buyimg.com/jrpmobile/jfs/t27631/208/1513930801/9151/55693fb9/5be4fb0bN15c07ec1.png?width=335&height=210',
                            title: '机票每日特惠',
                            price: '29.00',
                            progress: 172,
                            jx: '精选'
                        },
                        {   
                            _id:'A002',
                            img: 'https://img12.360buyimg.com/jrpmobile/jfs/t27631/208/1513930801/9151/55693fb9/5be4fb0bN15c07ec1.png?width=335&height=210',
                            title: '机票每日特惠',
                            price: '229.00',
                            progress: 26
                        }
                    ]
                },
                {   
                    _sid:'02',
                    catory: 'https://img12.360buyimg.com/jrpmobile/jfs/t20125/139/377044579/41214/51a08cb6/5b0b947bN916e62ee.jpg?width=1500&height=442',
                    list: [
                        {   
                            _id:'B001',
                            img: 'https://img12.360buyimg.com/jrpmobile/jfs/t27631/208/1513930801/9151/55693fb9/5be4fb0bN15c07ec1.png?width=335&height=210',
                            title: '机票每日特惠',
                            price: '29.00',
                            progress: 72
                        },
                        {   
                            _id:'B002',
                            img: 'https://img12.360buyimg.com/jrpmobile/jfs/t27631/208/1513930801/9151/55693fb9/5be4fb0bN15c07ec1.png?width=335&height=210',
                            title: '机票每日特惠',
                            price: '229.00',
                            progress: 263,
                            jx: '精选'
                        }
                    ]
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
 @import '~assets/scss/element.scss';
    .panel{
        @include panel;
        .content{
            @include flex;
            .item{
                margin-bottom: .4rem;
                >img{
                    display: block;
                    width: 100%;
                    height: 1.7rem;
                }
                .list{
                    @include flex(row);
                    .product{
                        position: relative;
                        width: 50%;
                        height: 3.96rem;
                        box-sizing: border-box;
                        background-color: rgba(0,0,0,0.02);
                        text-align: center;
                        img{
                            width: 1.8rem;
                            height: 1.8rem;
                            margin: .44rem auto .2rem; 
                            display: block;
                        }
                        .title{
                            font-size: .28rem;
                            color: #444;
                        }
                        .price{
                            font-size: .2rem;
                            color: #999;
                            line-height: .48rem;
                            em{
                                margin-right: .04rem;
                                &::before{
                                    content: '￥';
                                    font-size: .2rem;
                                }
                                font-size: .28rem;
                                color: #ff3232;
                            }
                        }
                        article{
                            @include flex(row); 
                            align-items: center;
                            justify-content: space-around;
                            padding: 0 .2rem;
                            height: .3rem;
                            line-height: .3rem;
                            margin-top: .16rem;
                            .wrapper{
                                width: 1.74rem;
                                height: .1rem;
                                background: #f6E6E6;
                                border-radius: .22rem;
                                .inner{
                                    max-width: 100%;
                                   width: 40%;
                                   height: .1rem; 
                                //    background: linear-gradient(270deg, #F55, 1%, #FF9C31, 100%);
                                    background: red;
                                   border-radius: .22rem;
                                }
                            }
                            p{
                                font-size: .24rem;
                                color:#999;
                            }
                        }
                        label{
                            position: absolute;
                            left: 0;
                            top: 0;
                            font-size: .24rem;
                            color: #ff0000;
                            text-align: center;
                            padding: 4px 8px;
                            background-color: rgba(0,0,0,0.2); 
                        }
                    }
                }
            }
        }
    }
</style>

